Design Reference · Mega Menu

Mega Menu Sản phẩm — Thuốc Việt B2B

Trang tham chiếu cho dev. Mô tả cấu trúc menu chính ("Danh mục" trên thanh đỏ), mega-panel 2 cột (rail danh mục cha bên trái + grid 4 cột danh mục con có icon bên phải), tương tác hover/active, và mapping icon Lucide cho từng nhóm điều trị. Dùng làm cơ sở cập nhật code hiện tại.

01

Mega menu — trạng thái mở · "Thuốc kê đơn"

Hover hoặc click "Danh mục" trên thanh nav đỏ → panel mở rộng full-width
thuocviet.vn route: / Header 36+80+48 = 164px · Mega panel min-height 540px
hotro@thuocviet.vn Hotline 1800 0000 Sàn dược B2B chuẩn pháp lý VN
Tất cả
Trang chủ Danh mục Hoạt chất Nhà bán hàng Hồ sơ pháp lý Hướng dẫn Tin tức Deal tốt đến 25%

Thuốc kê đơn · 16 nhóm điều trị

874 SKU · cập nhật 14/05 Xem tất cả
Kháng vi sinh vật Giảm đau, hạ sốt, kháng viêm Tim mạch, huyết áp Hormon, sinh lý Tai, mũi, họng Đái tháo đường Tiêu hóa, dạ dày Não, thần kinh Da liễu Mắt Máu, huyết học Cơ, xương, khớp Vitamin, khoáng chất Kháng Histamin (chống dị ứng) Miếng dán, dầu, cao xoa Ung thư, miễn dịch
Một sản phẩm có thể thuộc nhiều nhóm điều trị (theo cây ATC). Tra cứu theo hoạt chất Tra cứu theo mã ATC
1 Danh mục cha · active = red-50 + đường viền đỏ trái
2 Header + count + “Xem tất cả”
3 Pill ETC chỉ hiển thị ở nhóm có gating
4 Grid 4×4 · icon vuông 40px bo 8px · màu nền dịu theo chuyên khoa
5 Footer · cross-links sang Hoạt chất / ATC
1 Left rail item
Width 280px · padding 10×14 · radius 8
Active: bg #FFEEF1 · indicator 3×
Icon Lucide 18px · ink-700 → red khi active
2 Panel header
16px/700 tên nhóm · 12/400 count
Right link 13/600 red · arrow-right 14px
Border-bottom dashed #EEEEEE
3 Class pill
ETC / OTC / KSĐB / TPCN / DEVICE
Pill 10/700 + uppercase · bg theo class
Chỉ render khi nhóm bị scope gating
4 Sub-category card
Min-height 64px · radius 10
Border 1px #EEEEEE · hover → red border + lift
Icon 40px square, soft tint bg theo chuyên khoa
02

Biến thể · các danh mục khác mở rộng

Cùng pattern; chỉ thay nội dung và icon
Thực phẩm chức năng 12 nhóm · 1.240 SKU

Thực phẩm chức năng · 12 nhóm

1.240 SKU Xem tất cả
Sức đề kháng Xương khớp Mẹ & bé Trí não, trí nhớ Tim mạch Vitamin tổng hợp Mất ngủ, an thần Mắt, thị lực Giảm cân
Thiết bị & Vật tư y tế 10 nhóm · 580 SKU

Thiết bị & Vật tư y tế · 10 nhóm

580 SKU Xem tất cả
Máy đo huyết áp Máy đo đường huyết Máy xông khí dung Nhiệt kế Kim, bơm tiêm Băng gạc, băng dán Khẩu trang, găng Xe lăn, gậy chống Dụng cụ chăm sóc
03

Mapping icon Lucide — 16 nhóm điều trị (Thuốc kê đơn)

Tham chiếu trực tiếp cho dev: tên icon + token màu nền
Icon
Nhóm điều trị
Tên Lucide
Background tint
Kháng vi sinh vật / antibiotics
bug
#FFEEF1 · #C8002B
Giảm đau, hạ sốt, kháng viêm / NSAID
thermometer
#FFF3E0 · #C2410C
Tim mạch, huyết áp / cardiovascular
heart-pulse
#FEE2E2 · #B91C1C
Hormon, sinh lý / endocrine
flask-conical
#FCE7F3 · #9D174D
Tai, mũi, họng / ENT
ear
#E0F2FE · #0369A1
Đái tháo đường / diabetes
droplet
#DBEAFE · #1D4ED8
Tiêu hóa, dạ dày / GI
utensils-crossed
#FEF3C7 · #92400E
Não, thần kinh / CNS
brain
#EDE9FE · #5B21B6
Da liễu / dermatology
hand
#FFEDD5 · #9A3412
Mắt / ophthalmology
eye
#CFFAFE · #0E7490
Máu, huyết học / hematology
droplets
#FEE2E2 · #991B1B
Cơ, xương, khớp / MSK
bone
#F1F5F9 · #475569
Vitamin, khoáng chất / supplements
pill
#FEF9C3 · #854D0E
Kháng Histamin / antihistamines
wind
#DCFCE7 · #15803D
Miếng dán, dầu, cao xoa / topical
bandage
#FEF3C7 · #A16207
Ung thư, miễn dịch / oncology & immunology
shield-plus
#F3E8FF · #6B21A8
04

Behaviour · tương tác & trạng thái

Cho FE implement

Trigger

Mở mega panel khi hover hoặc focus vào item “Danh mục” trên nav đỏ. Trên touch device đầu tiên tap mở, tap thứ hai mới điều hướng.

Đóng khi: pointer rời khỏi cả nav strip lẫn panel (delay ~150ms), nhấn Esc, hoặc click ra ngoài.

Keyboard

↓/↑ di chuyển trong rail trái, → nhảy sang grid phải, ← quay lại rail. Enter điều hướng tới trang category. Tab đi qua các sub-card theo thứ tự đọc.

Focus ring: outline đỏ 2px offset 2px (chuẩn MedBASE).

Hover preview

Hover vào item rail → đổi panel ngay (không cần click). Animation: opacity 0→1 + translate-y 2px→0, 120ms ease-out. Không bounce.

Đổi panel có debounce 60ms để tránh nháy khi pointer quét nhanh qua rail.

Scope-aware

Nhóm có gating (ETC, KSĐB) hiển thị pill class · click vào nếu buyer không đủ scope → grayed-out + tooltip cảnh báo, không điều hướng tới catalog.

Áp dụng canBuyerSee(class, scope) từ data-v2.jsx.

Mobile fallback

Dưới 768px: thay mega panel bằng full-screen drawer. Rail trái và panel phải xếp dọc (rail → list các category accordion). Giữ cùng icon mapping.

Data source

Categories cha lấy từ bảng category (9 root). Sub-categories lấy từ therapeutic_group link với ATC cấp 2/3.

Icon & tint lưu trong cột ui_icon/ui_tint để admin có thể đổi qua CMS mà không deploy.